<template>
  <HeadContainer class="mine-legal-privacy-policy" :title="$t('title.pp')" @back="back">
    <div :class="{ loading }">
      <div v-show="!loading" class="gap-col-8 pp-list">
        <div class="font-size-14 font-weight-500 line-height-135">{{ i18n.pp?.info.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.info.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.definitions.title }}</div>
        <table class="font-size-12 font-weight-500 line-height-135">
          <tr>
            <th>{{ i18n.pp?.definitions.table.title.a }}</th>
            <th>{{ i18n.pp?.definitions.table.content.a }}</th>
          </tr>
          <tr>
            <th>{{ i18n.pp?.definitions.table.title.b }}</th>
            <th>{{ i18n.pp?.definitions.table.content.b }}</th>
          </tr>
          <tr>
            <th>{{ i18n.pp?.definitions.table.title.c }}</th>
            <th>{{ i18n.pp?.definitions.table.content.c }}</th>
          </tr>
          <tr>
            <th>{{ i18n.pp?.definitions.table.title.d }}</th>
            <th>{{ i18n.pp?.definitions.table.content.d }}</th>
          </tr>

          <tr>
            <th>{{ i18n.pp?.definitions.table.title.e }}</th>
            <th>{{ i18n.pp?.definitions.table.content.e }}</th>
          </tr>
          <tr>
            <th>{{ i18n.pp?.definitions.table.title.f }}</th>
            <th>{{ i18n.pp?.definitions.table.content.f }}</th>
          </tr>
          <tr>
            <th>{{ i18n.pp?.definitions.table.title.g }}</th>
            <th>{{ i18n.pp?.definitions.table.content.g }}</th>
          </tr>
          <tr>
            <th>{{ i18n.pp?.definitions.table.title.h }}</th>
            <th>{{ i18n.pp?.definitions.table.content.h }}</th>
          </tr>
          <tr>
            <th>{{ i18n.pp?.definitions.table.title.i }}</th>
            <th>{{ i18n.pp?.definitions.table.content.i }}</th>
          </tr>
        </table>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.termsService.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.termsService.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.modifications.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.modifications.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.collectYou.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.collectYou.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.usePersonalInfo.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.usePersonalInfo.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.changePurpose.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.changePurpose.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.disclose.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.disclose.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.usersIn.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.usersIn.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.accountDeletion.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.accountDeletion.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.thirdParty.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.thirdParty.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.retention.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.retention.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.mergerSale.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.mergerSale.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.minors.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.minors.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.track.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.track.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.contact.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.contact.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.miscellaneous.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.miscellaneous.content }}</div>
        <div class="font-size-14 font-weight-500 line-height-135 pt-2">{{ i18n.pp?.language.title }}</div>
        <div class="font-size-12 font-weight-400 line-height-135">{{ i18n.pp?.language.content }}</div>
        <div class="font-size-12 font-weight-400 line-height-135 pt-2">{{ i18n.pp?.final }}</div>
        <div class="font-size-12 font-weight-400 line-height-135 pt-2">{{ i18n.pp?.fantasi }}</div>
      </div>
    </div>
  </HeadContainer>
  <Jsonld :schema="schema"></Jsonld>
</template>

<script setup>
import { ref, shallowRef, watch } from 'vue'
import { useRouter } from 'vue-router'
import { $t } from '@/i18n'
import Jsonld from '@/components/common/Jsonld.vue'
import HeadContainer from '@/components/layout/HeadContainer.vue'
import { useI18nPack } from '@/compositions/request/i18nPack'

const router = useRouter()
const i18n = useI18nPack('pp')
const emits = defineEmits(['toPage'])
const prevPath = ref(window.history.state.back)

function back() {
  if (prevPath.value && !prevPath.value?.includes('mine')) {
    router.push({
      path: prevPath.value,
    })
  } else {
    emits('toPage', 2, 'legal')
    router.replace({ name: 'mine', params: { to: 'legal' } })
  }
}

const loading = ref(true)
watch(i18n, (newI18nValue) => {
  if (newI18nValue) {
    loading.value = false
  }
})

// Jsonld 佈置
const schema = shallowRef({
  '@context': 'https://schema.org',
  '@type': 'WebSite',
  name: 'Fantasi',
  url: 'https://www.fantasi.one/mine/legal/privacy-policy',
})
</script>

<style lang="scss" scoped>
table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid;
  border-color: rgb(var(--v-theme-input));
  padding: 0.5rem;
}
</style>
